import { restoreCompetition, modifyScene } from '@/api/drill_compete'
import { mapState } from 'vuex'
import { getSceneInfo } from '@/api/drill_compete'
import { parseJson, format } from '@/libs/utils'

export default {
    data() {
        return {
            isClickOkBtn: false, // 是否点击了DatePicker组件的确认按钮
            originalTime: [], // 展示DatePicker组件时的初始时间
            oldEndDate: '' // 延迟竞赛、演练时，修改前的时间
        }
    },
    computed: {
        ...mapState(['currentTime'])
    },
    methods: {
        //恢复比赛后，开始时间修改
        restoreCompetition_minixs(drillid) {
            return new Promise((resolve,reject) => {//用来在请求完成后隐藏提示框，不关心结果是成功还是失败
                getSceneInfo(drillid).then(sceneDate => {
                    let serveTime = this.currentTime
                    let data
                    if (sceneDate.code === 1) {
                        data = sceneDate.data
                        if (!data) {
                            this.$Message.warning('获取场景详情失败，无法恢复')
                            resolve()
                        }
                    } else {
                        this.$Message.warning(sceneDate.message)
                        resolve()
                    }
                    let extension = parseJson(data.extension)
                    let endTime = data.endTime
                    let pauseTime = extension.pauseTime || 0 // 获取暂停的时间点
                    let timeDifference = serveTime - pauseTime // 获取暂停了多久的时间
                    endTime = new Date(new Date(endTime).getTime() + timeDifference) // 延迟结束时间，在原来基础上把暂停的时间加上去
                    if ([0, 1, 8].includes(data.type)) { // 带周期的场景，需要验证起止时间是否超过一周
                        let startTimeL = new Date(data.startTime).getTime()
                        let diff = 1000 * 60 * 60 * 24 * 7 // 七天
                        let bigEndTimeL = startTimeL + diff
                        if (serveTime >= bigEndTimeL) { // 当前时间已经超过了一周，不能恢复了，直接提示结束比赛
                            this.$Message.warning('距离开始已超过一周时间，无法恢复比赛，请结束比赛')
                            resolve()
                        }
                    }
                    restoreCompetition(drillid).then(({ code, message }) => {
                        if(code == 1){
                            this.$Message.info('操作成功')
                            this.getDrillDetail();
                        } else {
                            this.$Message.warning(message)
                        }
                        resolve()
                    }).catch(() => {
                        this.$Message.error('恢复异常')
                        resolve()
                    })
                }).catch(() => {
                    this.$Message.error('获取场景详情或系统时间异常，恢复失败')
                    resolve()
                })
            })
        },
        // 点击确认按钮关闭DatePicker组件时，标记状态
        clickOkBtn() {
            this.isClickOkBtn = true
        },
        // 起止时间模态框展示时，重新设置时间
        visibleChange(type) {
            if (type) {
                this.formValidate.Dates = [this.drillDetail.startTime, this.drillDetail.endTime];
            }
        },
        clickClearBtn() {
            this.formValidate.Dates = []
            this.clickOkBtn()
        },
        changeDates(timeList) {
            this.formValidate.Dates = timeList
        },
        // 切换DatePicker组件显示/关闭的状态
        switchOpenChange(isOpen) {
            this.$nextTick(() => {
                if (isOpen) { // 显示组件
                    this.isClickOkBtn = false
                    this.originalTime = this.formValidate.Dates
                } else { // 隐藏操作
                    if (!this.isClickOkBtn) { // 不是通过点击确认按钮关闭DatePicker组件时，复原时间
                        this.formValidate.Dates = this.originalTime
                        // 上面时间复原后，数据虽然正确，但是子组件时间输入框和日历组件选中的日期都不对，所以需要用下面的代码手动设置一次
                        let beginTime = this.originalTime[0]
                        let endTime = this.originalTime[1]
                        if (beginTime && endTime) { // 没有数据时，不要进行下面的赋值操作
                            // 之所以填充时间是为了兼容浏览器，忘了是哪个浏览器了，没有填充数据就生成Date异常了
                            // 举个例子，当数据为‘2021-08-05 14’时，需要填充分钟，否则无法生成时间
                            beginTime = beginTime.length !== 13 ? beginTime : `${beginTime}:00`
                            endTime = endTime.length !== 13 ? endTime : `${endTime}:00`
                            this.$refs['datePicker'].internalValue =
                                [new Date(beginTime),new Date(endTime)]
                            this.$refs['datePicker'].focusedDate = new Date(beginTime)
                        } else {
                            this.$refs['datePicker'].handleClear()
                        }
                    } else {
                        this.timeChange(this.formValidate.Dates)
                    }
                }
            })
        },
        // 重新开始，起止时间修改，同下，需要手动绑定一次
        timeChange(timeArr){
            if(timeArr.length > 0){
                this.$set(this.formValidate, 'startTime', timeArr[0] ? (timeArr[0]+':00') : '')
                this.$set(this.formValidate, 'endTime', timeArr[1] ? (timeArr[1]+':00') : '')
            }
        },
        // 延迟比赛时，结束时间修改，没有做双向数据绑定，所以需要手动设置一次
        changeEndDate(time){
            this.formValidate.endDate = time ? (time+':00') : '';
        },
        // 延迟比赛时间组件打开或关闭的操作
        endDateOpenChange(isOpen) {
            this.$nextTick(() => {
                if (isOpen) { // 打开时，将时间拷贝一份
                    this.isClickOkBtn = false
                    this.oldEndDate = this.formValidate.endDate
                } else { // 隐藏时将时间复原
                    if (!this.isClickOkBtn) { // 不是通过点击确认按钮关闭DatePicker组件时，复原时间
                        this.$set(this.formValidate, 'endDate', this.oldEndDate)
                    }
                }
            })
        }
    }
}